@use 'sass:map';
@use 'sass:list';
@use 'sass:meta';
// 断点定义
$breakpoints: (
  // phone
  'phone': (0, 600px),
  '>phone': 601px,
  // pad
  'pad': (601px, 1200px),
  '<=pad': (0, 1200px),
  '>pad': 1201px,
  // pad-v
  'pad_v': (601px, 840px),
  '<=pad_v': (0, 840px),
  '>pad_v': 841px,
  // pad-h
  'pad_h': (841px, 1200px),
  // laptop
  'laptop': (1201px, 1440px),
  '<=laptop': (0, 1440px),
  '>laptop': 1441px,
  'pad-laptop': (601px, 1440px),
  'pad_v-laptop': (841px, 1440px)
);

@mixin respond-to($breakname) {
  $bp: map.get($breakpoints, $breakname);
  @if meta.type-of($bp) == 'list' {
    $min: list.nth($bp, 1);
    $max: list.nth($bp, 2);
    @if $min == 0 {
      @media (max-width: $max) {
        @content;
      }
    } @else {
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

@mixin hoverable($hover: hover) {
  @media (hover: $hover) {
    @content;
  }
}

@mixin hover() {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
}

@mixin me-hover() {
  @content;
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
}

@mixin x-hover() {
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
  @include hover {
    transform: rotate(180deg);
  }
}

@mixin x-svg-hover() {
  overflow: hidden;
  svg {
    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
  }
  @include hover {
    svg {
      transform: rotate(180deg);
    }
  }
}
